<template>
	<view>
		<view class="setting-mask" :style="{
			'visibility': visible ? 'visible' : 'hidden'
		}" @tap="$emit('update:visible', false)"></view>
		<!-- 顶部 -->
		<view class="popup-top" :class="{
			'popup-top-show': visible
		}">
			<yb-nav-bar :options="{
				bgColor: skinColor.color_black,
				color: skinColor.color_white
			}" title="设置窗口">
			</yb-nav-bar>
		</view>
		<!-- 底部设置 -->
		<view class="popup-bottom" :class="{
			'popup-bottom-show': visible
		}">
			<view class="board padding-gap" :style="{'background-color': skinColor.color_black}">
				<view class="progress yb-flex yb-align-center yb-row">
					<yb-tap active="opacity" @click="prevPage">
						<yb-icon name="arrow-left" size="35" :color="skinColor.color_white"></yb-icon>
					</yb-tap>
					<yb-progress class="center" :itemShow="false" disabled :height="4" :itemSize="20" :activeColor="skinColor.color_red" :value="record.progress"></yb-progress>
					<yb-tap active="opacity" @click="nextPage">
						<yb-icon custom-style="transform: rotateZ(180deg)" name="arrow-left" size="35" :color="skinColor.color_white"></yb-icon>
					</yb-tap>
				</view>
				<view class="menus yb-flex yb-row yb-align-center">
					<view class="menu yb-flex yb-align-center yb-justify-center yb-flex-1" @tap="showChapter">
						<rd-icon class="icon" name="catalog" size="45" :color="skinColor.color_white"></rd-icon>
						<text class="label" :style="{color: skinColor.color_white}">章节</text>
					</view>
					<view class="menu yb-flex yb-align-center yb-justify-center yb-flex-1" @tap="settingShow = true">
						<rd-icon class="icon" name="paging" size="38" :color="skinColor.color_white"></rd-icon>
						<text class="label" :style="{color: skinColor.color_white}">翻页</text>
					</view>
					<view class="menu yb-flex yb-align-center yb-justify-center yb-flex-1" @tap="showComment">
						<rd-icon class="icon" name="comment" size="40" :color="skinColor.color_white"></rd-icon>
						<text class="label" :style="{color: skinColor.color_white}">评论</text>
					</view>
					<view class="menu yb-flex yb-align-center yb-justify-center yb-flex-1" @tap="$store.dispatch('app/switchSkin')">
						<rd-icon class="icon" :name="skinMode == 'night' ? 'sun' : 'moon'" size="35" :color="skinColor.color_white"></rd-icon>
						<text class="label" :style="{color: skinColor.color_white}">{{skinMode == 'night' ? '日间' : '夜间'}}</text>
					</view>
				</view>
				<yb-gap></yb-gap>
			</view>
		</view>
		<yb-popup direction="bottom" :visible.sync="settingShow">
			<view class="board setting" :style="{'background-color': skinColor.color_black}" @touchmove.stop.prevent="">
				<view class="line yb-flex yb-row yb-align-start">
					<text class="label" :style="{color: skinColor.color_white}">翻页</text>
					<view class="right yb-flex yb-flex-1 yb-row yb-wrap yb-align-center">
						<view class="btn yb-flex yb-justify-center"
						@tap="$store.dispatch('reader/changePageType', item.value)"
						v-for="(item, index) in pageTypes" :key="index"
						:style="{
							'border-color': item.value == pageType ? skinColor.color_orange : skinColor.color_white,
							'margin-bottom': '20rpx',
							'margin-right': '10rpx'
						}">
							<text class="text"
							:style="{
								color: item.value == pageType ? skinColor.color_orange : skinColor.color_white
							}">{{item.label}}</text>
						</view>
					</view>
				</view>
				<yb-gap height="60rpx"></yb-gap>
			</view>
		</yb-popup>
		<rd-catalog ref="catalog" type="chapter" :catalog="catalogs" :title="title" @itemClick="onCatalogClick"></rd-catalog>
		<yb-notify ref="notify"></yb-notify>
	</view>
</template>

<script>
	import appMixin from '@/common/mixin/app.js'
	import paramsMixin from '@/common/mixin/params.js'
	export default {
		mixins: [appMixin, paramsMixin],
		props: {
			visible: {
				type: Boolean,
				default: false
			}
		},
		computed: {
			catalogs () {
				return this.$store.getters['reader/getCatalogs'];
			},
			record () {
				return this.$store.getters['reader/getRecord']
			},
			pageType() {
				return this.$store.getters['reader/getPageType']
			}
		},
		data () {
			return {
				settingShow: false,
				pageTypes: [{
					label: '仿真',
					value: 'real'
				},{
					label: '覆盖',
					value: 'cover'
				}]
			}
		},
		methods: {
			nextPage () {
				const index = this.catalogs.findIndex(item => item.chapter == this.record.chapter + 1)
				if ( index > -1 ) {
					this.changePage(this.catalogs[index])
				} else {
					this.$refs.notify.warning('后面已经没有章节了')
				}
			},
			prevPage () {
				const index = this.catalogs.findIndex(item => item.chapter == this.record.chapter - 1)
				if ( index > -1 ) {
					this.changePage(this.catalogs[index])
				} else {
					this.$refs.notify.warning('前面已经没有章节了')
				}
			},
			showChapter () {
				this.$refs.catalog.show()
			},
			onCatalogClick (params) {
				this.changePage(params)
			},
			switchDirection () {
				let direction = this.$store.getters['reader/getDirection']
				if ( direction == 'vertical' ) {
					plus.screen.lockOrientation('landscape-primary');
				} else {
					plus.screen.lockOrientation('portrait-primary');
				}
				this.$store.dispatch('reader/changeDirection', direction == 'vertical' ? 'horizontal' : 'vertical')
				this.show = false
			},
			changePage (e) {
				this.$emit('change', e)
			},
			showComment () {
				this.$emit('showComment')
			}
		}
	}
</script>

<style>
	.setting-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	.popup-top {
		transform: translateY(-200rpx);
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		transition: transform .3s;
	}
	.popup-bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		transform: translateY(200rpx);
		transition: transform .3s;
	}
	.popup-top-show {
		transform: translateY(-1px);
	}
	.popup-bottom-show {
		transform: translateY(1px);
	}
	.board .progress {
		height: 80rpx;
	}
	.board .progress .center {
		flex: 1;
		margin: 0 30rpx;
	}
	.board .menus .menu {
		height: 80rpx;
	}
	.board .menus .menu .icon {
		height: 45rpx;
	}
	.board .menus .menu .label {
		font-size: 24rpx;
	}
	
	.setting {
		padding: 0 60rpx;
	}
	.setting .line {
		margin-top: 60rpx;
	}
	.setting .line .label {
		font-size: 24rpx;
		height: 50rpx;
		line-height: 50rpx;
	}
	.setting .line .right {
		margin-left: 40rpx;
	}
	.setting .line .text {
		font-size: 24rpx;
		margin: 0 20rpx;
	}
	.setting .btn {
		border-width: 1px;
		border-radius: 50rpx;
		border-style: solid;
		height: 50rpx;
		padding: 0 30rpx;
	}
	.setting .gap {
		border-width: 1rpx;
		border-radius: 10rpx;
		border-style: solid;
		height: 50rpx;
		width: 60rpx;
		margin-right: 30rpx;
	}
	.setting .gap .w {
		width: 40rpx;
	}
	.setting .gap .h {
		width: 40rpx;
		height: 2rpx;
	}
</style>
